<docs>
# 自己的项目
</docs>
<template>
  <div class="ownProject">
    <el-form ref="form" :inline="true" :model="form" :rules="rules">
      <el-form-item label="开始日期" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="date"
          placeholder="预计开始日期"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="预计结束日期"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="筛选条件" prop="condition">
        <el-select v-model="form.condition" filterable placeholder="请选择" style="width:100%">
          <el-option
            v-for="item in formList.conditionList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
      <el-button plain type="primary" icon="el-icon-refresh-left" @click="resetFn()">重置</el-button>
    </el-form>
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand"> 
          <template slot-scope="props">
            <el-form label-position="left" inline class="table-expand">
              <el-form-item label="项目名称">
                <span>{{props.row.name}}</span>
              </el-form-item>
              <el-form-item label="项目所属">
                <span>{{props.row.super}}</span>
              </el-form-item>
              <el-form-item label="项目类型">
                <span>{{props.row.type}}</span>
              </el-form-item>
              <el-form-item label="项目等级">
                <el-tag type="danger">{{props.row.grade}}</el-tag>
              </el-form-item>
              <el-form-item label="预计开发时间">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{props.row.time}}</span>
              </el-form-item>
              <el-form-item label="项目描述">
                <span>{{props.row.desc}}</span>
              </el-form-item>
              <el-form-item label="相关材料">
                <a
                  href="javascript:void(0)"
                  class="filelink"
                  v-for="item in props.row.file"
                  :key="item.link"
                >{{item.name}}</a>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="name" min-width="30%"></el-table-column>
        <el-table-column label="需求姓名" prop="leader" min-width="15%"></el-table-column>
        <el-table-column label="预计开发时间" min-width="20%">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="天数" prop="day" min-width="15%"></el-table-column>
        <el-table-column label="项目类型" prop="type" min-width="15%"></el-table-column>
        <el-table-column label="项目等级" min-width="15%">
          <template slot-scope="scope">
            <el-tag type="danger">{{scope.row.grade}}</el-tag>
          </template>
        </el-table-column>
        
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { validator } from "common/js/valid";
export default {
  data() {
    return {
      form: {
        startTime: "", //开始时间
        endTime: "", //介绍时间
        condition: "" //查询条件
      },
      formList: {
        conditionList: [
          {
            name: "开发中",
            value: "01"
          },
          {
            name: "未开发",
            value: "02" 
          },
          {
            name: "已完结",
            value: "03"
          }
        ]
      },
      rules: {
        startTime: [{ validator: validator('256, "full", "项目名称", false') }],
        endTime: [{ validator: validator('256, "full", "项目名称", false') }],
        condition: [{ validator: validator('256, "full", "项目名称", false') }]
      },
      tableData: [
        {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          time: "2020-10-10至2020-11-11",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        },
        {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          time: "2020-10-10至2020-11-11",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        },
        {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          time: "2020-10-10至2020-11-11",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        },
        {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          time: "2020-10-10至2020-11-11",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        },
        {
          name: "灵活就业需求变更_01",
          super: "灵活就业",
          leader:"张三",
          type: "新增",
          grade: "着急",
          day:'10人/天',
          time: "2020-10-10至2020-11-11",
          desc: "这是一段没有感情的描述文字",
          sfsh: "1", //是否分配人员
          shzt: "张龙、赵虎、王朝、马汉", 
          file: [
            {
              name: "asdadad.xls",
              link: "asdasdadadadasd"
            },
            {
              name: "asdadad.doc",
              link: "asdasdadadadasd"
            }
          ]
        }
      ]
    };
  },
  methods: {
    search() {},
    resetFn() {
      console.log(this.$refs["form"].resetFields);
      this.$refs["form"].resetFields();
    },
    // 分配人员
    distribution(){
      this.changeRyShow = true;
    },
    // 关闭弹窗
    close(){

    },
    // 确认分配
    confirmDist(){
      this.changeRyShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-expand {
  font-size: 0;
}
.table-expand /deep/ label {
  width: 120px;
  color: #99a9bf;
  text-align: right;
}
.table-expand /deep/ .el-form-item {
  display: block;
  margin: 0;
}
.filelink {
  color: #409eff;
  margin-right: 20px;
  &:hover {
    text-decoration: underline;
  }
}
</style>
